<!--
 * @Description:
 * @Author:
 * @Date: 2024-10-25 22:32:13
 * @LastEditTime: 2025-02-20 21:22:25
 * @LastEditors: XXX
-->
<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script setup lang="ts">
import { useStore } from '@/store'
import { computed, onBeforeMount, shallowRef } from 'vue';
import AdminDashboard from './admin/index.vue'
import EditorDashboard from './editor/index.vue'

const store = useStore()
const currentRole = shallowRef((AdminDashboard))

const roles = computed(() => {
  const roles = store.state.user.roles
  return roles
})

console.log('roles.value :>> ', roles.value);

onBeforeMount(() => {
  if (!roles.value.includes('admin')) {
    currentRole.value = EditorDashboard
  }
})
</script>

<style lang="scss" scoped>

</style>
